<template>
	<view class="class-list">
		<view class="lodingLayout" v-if="!total">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		
		<view class="content">
			<view class="item" v-for="(item, index) in classList" :key="item._id" @click="gotoPreview(index, item._id)">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</view>
		</view>
		
		<view class="lodingLayout" v-if="classList.length >= total">
			<uni-load-more status="noMore"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { onLoad, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { onBeforeMount, reactive, ref } from 'vue'
import { getClassListAPI } from '@/api/class.js'
import { myDownloadOrScoreAPI } from '@/api/user.js'
import { useClassListStore } from '@/stores/class-list.js'

const classList = ref([])
const classid = ref(null)
const className = ref(null)
const pageNum = ref(1)
const total = ref(0)
const isLoding = ref(false)
const classListStore = useClassListStore()
const type = ref(null)

// 获取分类下的壁纸
const getClassList = async (params) => {
	let res = null
	type.value ? res = await myDownloadOrScoreAPI({ type: type.value, pageNum: pageNum.value, ...params }) : res = await getClassListAPI({ classid: classid.value, pageNum: pageNum.value, ...params })
	if(res.errCode === 0) {
		classList.value = classList.value.concat(...res.data)
		classList.value?.map(item => {
			item.className = className.value
			item.picUrl = item.smallPicurl.replace("_small.webp", ".jpg")
		})
		classListStore.classList = classList.value // 存入仓库
		res?.total ? total.value = res.total : total.value = res.data.length
		// console.log('分类详情', res);
	} else {
		uni.showToast({ title: res.errMsg, icon: 'error' })
		console.error(res)
	}	
}
// 跳转预览
const gotoPreview = (index, id) => {
	uni.navigateTo({
		url: `/pages/preview/preview?index=${index}&id=${id}&classname=${className.value}`
	})
}

// 初始化
onLoad((options) => {
	const { id = null, name = null } = options;
	classid.value = id;
	className.value = name;
	type.value = options.type ?? null
	uni.setNavigationBarTitle({ title: name });
})

// 触底
onReachBottom(async () => {
	if(isLoding.value) return;
	if(classList.value.length >= total.value) {
		// uni.showToast({ title: '加载完毕', duration: 1000 })
		return;
	}
	
	isLoding.value = true
	uni.showLoading({ title: '加载中'});
	pageNum.value += 1
	await getClassList({ pageNum: pageNum.value })
	isLoding.value = false
	uni.hideLoading();
})

// 分享到消息
onShareAppMessage((e) => {
	return {
		title: `青冥壁纸-${className.value}`,
		path: `/pages/class-list/class-list?id=${classid.value}&name=${className.value}`,
		// imageUrl: '/static/images/share.jpg'
	}
})
// 分享到朋友圈
onShareTimeline(() => {
	return {
		title: `青冥壁纸-${className.value}`,
		query: `id=${classid.value}&name=${className.value}`,
	}
})

onBeforeMount(() => {
	getClassList()
})
</script>

<style lang="scss" scoped>
.class-list {
	
	& > .content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5rpx;
		padding: 5rpx;
		
		.item {
			height: 440rpx;
			
			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		
	}
}
</style>
